<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Sample</title>
<style>
body {
	font-family: 微软雅黑, 'Microsoft YaHei', \5FAE\8F6F\96C5\9ED1, sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
// [04]===========================================================
// SQL操作的回调函数
function queryResult(tx, result){
   try{
      // 获取所有记录行
      var rowList = result.rows;
      // 获取每个记录行
      for(var i=0;i<rowList.length;i++){
         var row = rowList.item(i);
         // 获取每个记录行的内容：列名和值
         for(var j in row){
            document.writeln(j + "=" + row[j] + "<br />");
         }
      }
   }catch(err){
      alert(err.message?err.message:err.toString());
   }
}
function queryError(tx, err){
   alert(err.message?err.message:err.toString());
}

// [03]===========================================================
// 事务操作的回调函数
function callback(tx){
   // 在事务中执行SQL操作
   var sql;
   // 创建数据库表的结构
   sql = "CREATE TABLE employees(firstName TEXT,lastName TEXT,EmpType TEXT,age INTEGER)";
   tx.executeSql(sql);
   // 插入数据记录
   sql = "INSERT INTO employees (firstName,lastName,EmpType,age) VALUES ('myFirst','myLast','myEmpType',40)";
   tx.executeSql(sql);
   // 插入数据记录
   sql = "INSERT INTO employees (firstName,lastName,EmpType,age) VALUES (?,?,?,?)";
   tx.executeSql(sql, ['myFirst','myLast','myEmpType',40]);
   // 查询数据记录
   sql = "SELECT * FROM employees";
   tx.executeSql(sql, [], queryResult, queryError);
}
// [01]===========================================================
// 创建数据库或建立连接
try{
   var db = window.openDatabase('mydb', '1.0',
                                      '我的第一个客户端数据库',
                                      2 * 1024 * 1024); 
}catch(err){
   alert(err.message?err.message:err.toString()); 
}
if(!db) alert("不能连接到数据库！"); 
// [02]===========================================================
// 执行事务
db.transaction(callback);
</script>
</body>
</html>
